<template>
    <div>
        <el-dialog :title="titleDia" :visible.sync="showWin" width="1050px" :before-close="cancelBtn">
            <el-form :model="picketageForm" :rules="rulesPicketage" ref="picketageForm" label-width="140px" class="d_m_height formStyle">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="拍卖会名称">
                            <el-input v-model="picketageForm.auction_name" :disabled="true" size="mini" placeholder="请输入标的名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="标的名称">
                            <el-input v-model="picketageForm.lots_name" :disabled="true" size="mini" placeholder="请输入计量单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="标的数量">
                            <el-input v-model="picketageForm.amount" :disabled="true" size="mini" placeholder="请输入预估数量"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="保留单价(元):" prop="name">
                            <el-input v-model="picketageForm.min_price" :disabled="true" size="mini" placeholder="请输入保留单价"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="起始单价(元):" prop="name">
                            <el-input v-model="picketageForm.start_price" :disabled="true" size="mini" placeholder="请输入起始单价"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="竞拍号:">
                            <el-input v-model="picketageForm.bidnum" :disabled="true" size="mini" placeholder="请输入竞拍号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="竞标出价:">
                            <el-input v-model="picketageForm.max_price" :disabled="true" size="mini" placeholder="请输入竞标出价"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="拟中标人:" prop="name">
                            <span class="colorBlue handShow">{{picketageForm.bidder_name}}</span>
                        </el-form-item>
                        
                        
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="竞买人:" prop="name">
                            <span class="colorBlue handShow" @click="bidderOpen">查看</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="竞价记录:">
                            <span class="colorBlue handShow" @click="recordOpen">查看</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="竞拍详情:" prop="name">
                            <span class="colorBlue handShow" @click="goMpwPage">竞拍详情</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成交/确认通知书:" prop="name">
                            <span class="colorBlue handShow">查看</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- 待定标 -->
                <template v-if="onlyOne=='5'">
                    <el-button type="primary" size="small" @click="confirmAddform('2')">成交</el-button>
                    <el-button type="primary" size="small" @click="confirmAddform('4')">流拍</el-button>
                    <el-button type="primary" size="small" @click="confirmAddform('3')">撤拍</el-button>
                </template>
                <!-- 已成交显示 -->
                <template v-else-if="onlyOne=='2'">
                    <el-button type="primary" size="small" @click="confirmAddform">撤销定标</el-button>
                </template>
                <!-- 已流拍显示 -->
                <template v-else-if="onlyOne=='4'">
                    <el-button type="primary" size="small" @click="confirmAddform">再次竞价</el-button>
                    <el-button type="primary" size="small" @click="confirmAddform">撤销定标</el-button>
                </template>
                <el-button size="small" @click="cancelBtn">关 闭</el-button>
                
            </div>
        </el-dialog>
        <!-- 竞买人弹窗 -->
        <bidderDialog
        :bidderShow="bidderShow"
        :id="idBidder"
        @closeBidderLog="closeBidderLog"
        />

        <recordDialog
        :recordShow="recordShow"
        :idrecord="idBidder"
        @closeRoecordLog="closeRoecordLog"
        />
    </div>
   
</template>

<script>
import bidderDialog from './bidderDialog.vue';
import recordDialog from './recordDialog.vue'
import {calibrationRegistration,iscalibration} from '@/api/release'
import { mapState } from 'vuex';
export default {
    components:{
        bidderDialog,recordDialog
    },
    props:{
        titleDia:[String],
        showWin:[Boolean],
        onlyOne:[String,Number],
        idRow:[String,Number]
    },
    data(){
        return{
            picketageForm:{
                auction_name:"",
                lots_name:"",
                min_price:"",
                start_price:"",
                lots_id: '', //标的id（跳转查看标的拍卖页面）
                auction_id: '', //拍卖会的id（跳转查看标的拍卖页面）
                max_price: "", //最高出价
                bidnum: "", //竞买号
                bidder_name: "", //竞买人
                amount:'',
                id:'',
            },
            rulesPicketage:{
                name:[{ required: true, trigger: 'blur',message:'请输入标的名称'}],
            },
            // 竞买人弹窗
            bidderShow:false,
            idBidder:'',
            // 竞价记录弹窗
            recordShow:false,
        }
    },
    created(){
       
    },
    computed:{
        ...mapState('user',['userInfo'])
    },
    watch:{
        showWin:{
            handler(newval,oldval){
                if(newval){
                    this.getPageData(this.idRow);
                }
            }
        }
    },
    methods:{
        getPageData(id){
            calibrationRegistration({id:id}).then(res => {
                this.picketageForm = res.data[0];
            });
        },

        confirmAddform(is_id){
            iscalibration({id:this.picketageForm.id,is_calibration:is_id}).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: res.msg,
                        type: "success",
                    });
                    this.$emit('successPicketage');
                }
            });
        },
        // 点击竞买人
        bidderOpen(){
            this.idBidder = this.picketageForm.id;
            this.bidderShow = true;
            
        },
        // 关闭竞买人弹窗
        closeBidderLog(){
            this.bidderShow = false;
        },
        // 点击竞价记录
        recordOpen(){
            this.idBidder = this.picketageForm.id;
            this.recordShow = true;
        },
        // 关闭竞价记录弹窗
        closeRoecordLog(){
            this.recordShow = false;
        },
        //点击竞拍详情
        goMpwPage(){
            window.open(`https://www.ympai.net/pc/#/lots/detail?lotsId=${this.picketageForm.lots_id}&auctionid=${this.picketageForm.auction_id}`,"_blank");
        },
        //点击取消
        cancelBtn(){
            // this.$refs.picketageForm.resetFields();
            this.$emit('closePicketage');
        },
    }
}
</script>

<style lang="scss" scoped>
   .formStyle{
        .el-form-item{
            margin-bottom: 16px;
            ::v-deep .el-form-item__content{
                line-height: 32px;
                .span_lh{
                    color: #F56C6C;
                }
            }
            ::v-deep .el-form-item__label{
                line-height: 32px;
            }
        }
    .handShow{
        cursor: pointer;
    }
   }
</style>
  